<template>
	<view class="pay-page">
		<view class="iconfont icon-chenggong"></view>
		<view class="pay-success">支付成功</view>
		<!-- <view class="price">￥12.00</view>
		<view class="payment-item">
			<view class="text">收款方</view>
			<image src="https://suzhou-taxi-1306862033.cos.ap-chengdu.myqcloud.com/file/face.png" class="pay-img">
			</image>
			<view class="pay-name">赵勇</view>
		</view> -->
		<image src="/static/image/car-record.png" mode="widthFix" class="car-img"
			@click="goDetail('/pages/record/record')"></image>
		<view class="invoice-tip" @click="goDetail('/pages/invoice/invoice_list')">
			点击开具行程发票 >
		</view>
		<view class="info-block">
			<view class="title-item">
				<view class="line"></view>
				<view class="title">满意度评价</view>
			</view>
			<view class="menu-block">
				<view class="menu-item" :class="menuTab==1?'active' :''" @click="menuTab=1">
					<image src="/static/image/satisfied.png" class="satisfied"></image>
					<view class="menu-name">满意</view>
				</view>
				<view class="menu-item" :class="menuTab==2?'active' :''" @click="menuTab=2">
					<image src="/static/image/dissatisfied.png" class="satisfied"></image>
					<view class="menu-name">不满意</view>
				</view>
			</view>
			<view class="rate-item">
				<view class="rate-info">
					<view class="rate-name">车辆整洁干净</view>
					<uni-rate :value="form.cleanId" color="#d8d8d8" active-color="#ff9a00" size="26"
						@change="onChange" />
				</view>
				<view class="rate-text" v-if="form.cleanId==1">很差</view>
				<view class="rate-text" v-else-if="form.cleanId==2">较差</view>
				<view class="rate-text" v-else-if="form.cleanId==3">一般</view>
				<view class="rate-text" v-else-if="form.cleanId==4">满意</view>
				<view class="rate-text" v-else-if="form.cleanId==5">超赞</view>
			</view>
			<view class="rate-item">
				<view class="rate-info">
					<view class="rate-name">司机状态友好</view>
					<uni-rate v-model="form.state" color="#d8d8d8" active-color="#ff9a00" size="26"
						@change="onChange1" />
				</view>
				<view class="rate-text" v-if="form.state==1">很差</view>
				<view class="rate-text" v-else-if="form.state==2">较差</view>
				<view class="rate-text" v-else-if="form.state==3">一般</view>
				<view class="rate-text" v-else-if="form.state==4">满意</view>
				<view class="rate-text" v-else-if="form.state==5">超赞</view>
			</view>
			<view class="rate-item">
				<view class="rate-info">
					<view class="rate-name">安全愉快到达</view>
					<uni-rate :value="form.secure" color="#d8d8d8" active-color="#ff9a00" size="26"
						@change="onChange2" />
				</view>
				<view class="rate-text" v-if="form.secure==1">很差</view>
				<view class="rate-text" v-else-if="form.secure==2">较差</view>
				<view class="rate-text" v-else-if="form.secure==3">一般</view>
				<view class="rate-text" v-else-if="form.secure==4">满意</view>
				<view class="rate-text" v-else-if="form.secure==5">超赞</view>
			</view>
		</view>
		<view class="info-block" v-if="menuTab==2">
			<view class="title-item">
				<view class="line"></view>
				<view class="title">我要投诉/意见建议</view>
			</view>
			<view class="tips-block">
				<view class="tips-item" v-for="(item, index) in tipsList" :key="index"
					:class="tipsTab == item.dict_value?'active':''" @click="selectTip(item.dict_value)">
					{{ item.dict_label }}
				</view>
			</view>
			<textarea v-model="form.content" placeholder="请输入意见或建议..." class="form-crl"
				placeholder-class="price-crl"></textarea>
			<view class="text">上传文件（可上传图片、视频等佐证材料）</view>
			<view class="upload-item">
				<view v-for="(item, index) in form.imgList" :key="index" class="image-item">
					<view>
						<video v-if="item.includes('.mp4')" :src="item" class="img"></video>
						<image mode="aspectFit" :src="cloudStorage + item" @click="previewImg(item)" v-else class="img">
						</image>
					</view>
					<view @click.stop="closeImg(index)" style="display: inline;">
						<view class="iconfont">
							<image src="/static/image/delete.png" class="delete"></image>
						</view>
					</view>
				</view>
				<view class="upload-content" v-if="form.imgList.length < 9" @click="openShow">
					<image src="/static/image/upload.png" class="upload-img"></image>
				</view>
			</view>
		</view>
		<view class="btn normal" @click="submit">提交</view>
		<view class="prompt-block">
			<view class="prompt-title">温馨提示</view>
			<view class="prompt-content">对出租车强行载客、拒载、不打表等违规运营行为可进行投诉举报。经查证属实后将全额退还乘车费用，欢迎广大
				乘客举报监督。</view>
			<view class="prompt-item">
				<view class="time">投诉电话：0937-12328</view>
				<view class="iconfont icon-a-226dianhuabodatonghua" @click="call('0937-12328')"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		complaintApi,
		getDicByCode
	} from '@/api/complaints.js'
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		validate
	} from '@/util/validate.js';
	export default {
		data() {
			return {
				form: {
					cleanId: 4,
					state: 4,
					secure: 4,
					content: '',
					imgList: [],
					type: '',
				},
				tipsList: [],
				menuTab: 1,
				tipsTab: '',
				rule: {
					type: {
						name: '投诉类型',
						required: true,
					},
					content: {
						name: '投诉内容',
						required: true,
					},
				},
			}
		},
		watch: {
			menuTab() {
				this.form.content = ''
				this.form.imgList = []
				this.form.type = ''
				this.tipsTab = ''
			}
		},
		methods: {
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			onChange(e) {
				this.form.cleanId = e.value
			},
			onChange1(e) {
				this.form.state = e.value
			},
			onChange2(e) {
				this.form.secure = e.value
			},
			selectTip(value) {
				this.tipsTab = value; // 更新高亮状态
				this.form.type = value; // 赋值给表单
			},
			submit() {
				let files = ''
				if (this.form.imgList.length > 0) {
					files = this.form.imgList.join(',')
				}
				if (this.menuTab == 2) {
					if (validate(this.form, this.rule)) {
						uni.showLoading({
							title: '提交中...',
							mask: true
						});
						complaintApi({
							complaints: this.form.content,
							files: files,
							merchantId: this.merchantNo,
							type: this.form.type,
							driverFriendlyRating: this.form.state,
							safeAndPunctualRating: this.form.secure,
							vehicleCleanlinessRating: this.form.cleanId
						}).then((res) => {
							uni.hideLoading();
							this.showToast('提交成功')
						})
					}
				} else {
					uni.showLoading({
						title: '提交中...',
						mask: true
					});
					complaintApi({
						complaints: this.form.content,
						files: files,
						merchantId: this.merchantNo,
						type: this.form.type,
						driverFriendlyRating: this.form.state,
						safeAndPunctualRating: this.form.secure,
						vehicleCleanlinessRating: this.form.cleanId
					}).then((res) => {
						uni.hideLoading();
						this.showToast('提交成功')
					})
				}
			},
			getType() {
				getDicByCode({
					code: 'feedback_type'
				}).then((res) => {
					this.tipsList = res
				})
			},
			openShow() {
				// 这里可以调用 uni.chooseImage / uni.chooseFile 或其他上传逻辑
				uni.chooseFile({
					count: 9 - this.form.imgList.length,
					type: 'all',
					success: (res) => {
						let file = res.tempFiles[0].path
						uploadFile(file).then((res) => {
							this.form.imgList.push(res);
						});
					}
				})
			},

			// 预览图片
			previewImg(url) {
				uni.previewImage({
					urls: this.form.imgList.filter(item => !item.includes('.mp4')).map(item => this.cloudStorage +
						item),
					current: this.cloudStorage + url,
				});
			},
			// 删除文件
			closeImg(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前文件',
					success: function(res) {
						if (res.confirm) {
							that.form.imgList.splice(index, 1);
						}
					}
				});
			},
		},
		onLoad(e) {
			this.getType()
		},
	}
</script>

<style lang="scss" scoped>
	.pay-page {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.iconfont {
			color: #52c41a;
			margin-top: 140rpx;
			font-size: 100rpx;
		}

		.pay-success {
			color: #52c41a;
			font-size: 48rpx;
			margin-top: 30rpx;
			font-weight: bold;
		}

		.price {
			font-size: 90rpx;
			font-weight: bold;
			margin-top: 100rpx;
		}

		.payment-item {
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.text {
				color: #767676;
				margin-bottom: 30rpx;
			}

			.pay-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #fff;
				margin-bottom: 30rpx;
			}

			.pay-name {
				font-size: 32rpx;
			}
		}

		.car-img {
			width: 100%;
			margin-top: 60rpx;
		}

		.invoice-tip {
			width: 100%;
			text-align: center;
			color: #3175ff;
			font-size: 28rpx;
			margin-top: 20rpx;
			padding: 10rpx 0;
		}

		.info-block {
			background-color: #fff;
			width: 100%;
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;

			.title-item {
				display: flex;
				align-items: center;

				.line {
					width: 18rpx;
					height: 40rpx;
					border-radius: 60rpx;
					background-color: #3175ff;
					margin-right: 16rpx;
				}

				.title {
					font-weight: bold;
					font-size: 34rpx;
				}
			}

			.menu-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 30rpx;

				.menu-item.active {
					background-color: #fff8e6;
					color: #ff9a00;
				}

				.menu-item {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 14rpx;
					width: calc(50% - 15rpx);
					height: 80rpx;
					background-color: #f5f5f7;
					color: #767676;

					.satisfied {
						width: 50rpx;
						height: 50rpx;
						margin-right: 30rpx;
					}

					.menu-name {
						font-weight: bold;
						font-size: 34rpx;
					}
				}
			}

			.rate-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.rate-info {
					display: flex;
					align-items: center;

					.rate-name {
						margin-right: 20rpx;
						font-size: 30rpx;
					}
				}

				.rate-text {
					color: #767676;
					font-size: 28rpx;
				}
			}

			.tips-block {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.tips-item {
					background-color: #f5f5f5;
					padding: 10rpx 16rpx;
					font-size: 24rpx;
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
					color: #767676;
				}

				.tips-item.active {
					background-color: #4a8dff;
					color: #fff;
				}
			}

			.form-crl {
				background-color: #f5f5f5;
				width: 100%;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.text {
				font-size: 28rpx;
				margin-top: 30rpx;
			}

			.upload-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.image-item {
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					display: flex;
					flex-direction: row;

					.img {
						width: 190rpx;
						height: 200rpx;
						border-radius: 20rpx;
					}

					.name {
						width: 190rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 10rpx;
					}

					.iconfont {
						.delete {
							width: 18px;
							height: 18px;
							position: absolute;
							margin-left: -30rpx;
						}
					}
				}

				.image-item:nth-child(3n) {
					margin-right: 0;
				}

				.delete-item {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.delete {
						width: 20px;
						height: 20px;
						position: absolute;
					}
				}

				.upload-content {
					position: relative;
					background: #F1F1F1;
					border-radius: 10px;
					width: 200rpx;
					height: 220rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;

					.upload-img {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		.btn {
			width: calc(100% - 60rpx);
			margin: 0 auto;
			border-radius: 20rpx;
			height: 100rpx;
			margin-top: 30rpx;
		}

		.prompt-block {
			background-color: #e3e9f9;
			width: 100%;
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 30rpx;

			.prompt-title {
				text-align: center;
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 20rpx;
			}

			.prompt-content {
				font-size: 30rpx;
				font-weight: bold;
				line-height: 56rpx;
			}

			.prompt-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.time {
					font-size: 30rpx;
					font-weight: bold;
				}

				.iconfont {
					font-size: 40rpx;
					margin-top: 0;
					color: #3175ff;
					background-color: #bfd1fa;
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					font-size: 30rpx;
				}
			}
		}

		.form-block {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx 0;

			.name {
				width: 100%;
				font-weight: bold;
				font-size: 38rpx;
			}

			.form-text {
				width: 100%;
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #767676;
			}

			.form-item {
				display: flex;
				align-items: center;
				background-color: #f7f6f9;
				width: 100%;
				height: 100rpx;
				margin-top: 40rpx;
				border-radius: 60rpx;
				padding: 0 30rpx;

				.iconfont {
					font-size: 40rpx;
					margin-right: 30rpx;
					margin-top: 0;
					color: #000;
				}

				.small-btn {
					position: absolute;
					width: 210rpx;
					height: 70rpx;
					right: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 60rpx;
					font-size: 28rpx;
				}
			}

			.btn-item {
				width: 100%;
				height: 90rpx;
				margin-top: 10rpx;
				border-radius: 60rpx;
				background: #3175ff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ffffff;
				margin-top: 80rpx;
			}

			.type {
				margin-top: 80rpx;
				font-size: 30rpx;
			}
		}
	}
</style>